<template>
  <view class="content">
    <view class="flex">
      <image class="logo" :src="imgPath+ arr[nums[i]]" v-for="(item,i) in nums"/>
    </view>


  </view>
  <view>
  </view>
  <tm-sheet style="border-radius: 2px">
    <view class="flex flex-col-center-left">
      <tm-text :font-size="24" _class="text-weight-b" label="输入骰子数量,默认3个"></tm-text>
      <tm-text :font-size="24" _class="text-weight-b" :label="sum"></tm-text>
    </view>
    <tm-input placeholder="骰子数量" v-model.number="diceCount" suffixLabel="骰子数量"/>
    <view class="flex flex-row flex-row-center flex-col-center-center flex-1" style="margin-top: 5px">
      <tm-button :round="2" :disabled="disabled" font-size="24" :width="650" :height="60"
                 @click="start">开始
      </tm-button>
    </view>
  </tm-sheet>
</template>

<script>

export default {
  // 图片素材参考 https://blog.csdn.net/long19981231/article/details/131504034
  data() {
    return {
      diceCount: 3,
      disabled: false,
      timer: null,
      sum: "点击开始按钮摇骰子",
      nums: [0, 0, 0],
      imgPath: "../../../static/app",
      arr: ['/dice-1.png', '/dice-2.png', '/dice-3.png', '/dice-4.png', '/dice-5.png', '/dice-6.png']
    }
  },
  onLoad() {
    this.picFn();
    let num = 0;
    this.nums.forEach(item => {
      num += item
    });
    // this.sum = `分数：${num+3}`;
  },
  methods: {
    start() {
      if (Number(this.diceCount) > 9) {
        uni.showToast({title: '最多支持9个骰子', icon: 'none'})
        return
      }
      console.log(this.diceCount)
      this.nums = new Array(this.diceCount).fill(0);
      console.log('nums', this.nums)
      this.disabled = true
      clearInterval(this.timer);
      this.sum = "等待计算中";
      this.timer = setInterval(this.picFn, 100);
      setTimeout(() => {
        clearInterval(this.timer);
        let num = 0;
        this.nums.forEach(item => {
          num += item
        });
        console.log(this.nums)
        this.sum = `分数：${num + Number(this.diceCount)}`;
        this.disabled = false
      }, 1000);
    },
    randNum: () => Math.floor(Math.random() * 6),
    picFn() {
      this.nums = this.nums.map(item => this.randNum())
    },
  }
}

</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  justify-content: center;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 10rpx auto 20rpx 100rpx;
}


</style>
<style lang="scss">
page {
  background-color: #F7F7F7 !important;
}
</style>
